<template>
  <div class="button">
    <h2>button按钮</h2>
    <div class="back">
      <b-button type="info" transparent>info</b-button>
      <b-button color="yellow" transparent>info</b-button>
      <b-button color="red" transparent>测试幽灵按钮</b-button>
      <b-button color="pink" transparent>测试幽灵按钮</b-button>
    </div>
    <h4>测试自定义按钮</h4>
    <div class="zidingyi">
      <b-button>默认按钮</b-button>
       <b-button background="yellow" color="red">默认按钮</b-button>
    </div>
    <div class="box">
      <b-button type="default">default</b-button>
      <b-button type="primary">primary</b-button>
      <b-button type="dashed">dashed</b-button>
      <b-button type="text">text</b-button>
      <b-button type="info">info</b-button>
      <b-button type="success">success</b-button>
      <b-button type="warning">warning</b-button>
      <b-button type="error">error</b-button>
      <b-button type="joker">joker</b-button>
    </div>
    <h4>禁用点击移动</h4>
    <div class="box">
      <b-button type="default" slidable>default</b-button>
      <b-button type="primary" slidable>primary</b-button>
      <b-button type="dashed" slidable>dashed</b-button>
      <b-button type="text" slidable>text</b-button>
      <b-button type="info" slidable>info</b-button>
      <b-button type="success" slidable>success</b-button>
      <b-button type="warning" slidable>warning</b-button>
      <b-button type="error" slidable>error</b-button>
      <b-button type="joker" slidable>joker</b-button>
    </div>

    <div class="box">
      <b-button type="primary" circle class="vbestui-iconfont icon-success"></b-button>
      <b-button type="dashed" circle class="vbestui-iconfont icon-success"></b-button>
      <b-button type="info" circle class="vbestui-iconfont icon-success"></b-button>
      <b-button type="success" circle class="vbestui-iconfont icon-success"></b-button>
      <b-button type="warning" circle class="vbestui-iconfont icon-success"></b-button>
      <b-button type="error" circle class="vbestui-iconfont icon-success"></b-button>
      <b-button type="joker" circle class="vbestui-iconfont icon-success"></b-button>
    </div>

    <div class="box">
      <b-button type="primary" width="35px" height="35px" class="vbestui-iconfont icon-success"></b-button>
      <b-button type="dashed" width="35px" height="35px" class="vbestui-iconfont icon-success"></b-button>
      <b-button type="info" width="35px" height="35px" class="vbestui-iconfont icon-success"></b-button>
      <b-button type="success" width="35px" height="35px" class="vbestui-iconfont icon-success"></b-button>
      <b-button type="warning" width="35px" height="35px" class="vbestui-iconfont icon-success"></b-button>
      <b-button type="error" width="35px" height="35px" class="vbestui-iconfont icon-success"></b-button>
      <b-button type="joker" width="35px" height="35px" class="vbestui-iconfont icon-success"></b-button>
      <b-input search></b-input>
    </div>
  </div>
</template>
<script>
export default {
  name: "Buttom",
};
</script>
<style scoped>
.box {
  padding: 40px;
}
.box button {
  margin-bottom: 15px;
  margin-right: 20px;
}
.back {
  padding: 10px;
  background: var(--sidebar);
}
</style>